<template>
  <div class="box">
    <div class="w100 flex-row j-sb al-start">
      <!-- <build-el-h1 name="参选人展示.png" type="1" v-margin-top="'40px'"></build-el-h1>
      <build-el-more src="Vote"></build-el-more> -->
      <oneTitle :showMore="true" src="Vote" title="申报展示"></oneTitle>
    </div>
    <div
      class="w100 flex-row people-list"
      v-loading="Boolean(tableData === null)"
    >
      <el-row :gutter="20" style="width: 100%">
        <el-col :span="8" v-for="item in tableData" :key="item.artistId">
          <build-el-list-people
            :artistId="item.artistId"
            :titleImg="item._titleImg"
            :companyName="item.companyName"
            :artistPosition="item.artistPosition"
            :ticketNumber="item.ticketNumber"
            :artistName="item.artistName"
          ></build-el-list-people>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import buildElH1 from "../build-el-h1";
import buildElMore from "../build-el-more";
import buildElListPeople from "../build-el-list-people";
import JSONData from "@/assets/JSON";
export default {
  components: {
    buildElH1,
    buildElMore,
    buildElListPeople,
  },
  data() {
    return {
      tableData: null,
      ...JSONData,
    };
  },
  async created() {
    await this.init(1);
  },
  methods: {
    async init(page) {
      this.tableData = [];
      let tableData = await this.api.findNewVoteArtistList(1, 12);
      this.tableData = tableData.list;
      console.log(this.tableData, "申报展示");
    },
    changePage(e) {
      this.pageNow = e;
      this.init(e);
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  padding-left: calc((100vw - 1200px) / 2);
  width: 875px;
  box-sizing: content-box;
  .people-list {
    flex-wrap: wrap;
  }
}
</style>
